<template>
  <div class="container">
    <div class="card-info">
      <div class="item">
        <img v-if="binkCardInfo.bank_logo_url" :src="binkCardInfo.bank_logo_url" alt />
        <img v-else src="@/assets/yinglian.png" alt />
        <span class="binkName">{{binkCardInfo.parentBankName}}</span>
        <span v-show="showCard">({{showCard}})</span>
        <!-- <span class="binkName">中国农业银行</span>
        <span>(1234*********1234)</span>-->
      </div>
      <div class="item">
        <div class="name">短信证码</div>
        <input type="number" v-model="unBindParams.code" placeholder="输入短信验证码" />
        <div class="send_code">
          <span v-if="!downShow" @click="getUnbindcardCode">获取验证码</span>
          <span v-else class="downNum-btn">重新发送（{{downNum+'s'}}）</span>
        </div>
      </div>
    </div>
    <div :class="unBindParams.code ? 'btn active' : 'btn'" @click="_unbindBankcard">确认解绑</div>
  </div>
</template>

<script>
import { Notify } from "vant";
import { applyUnbindBankcard, unBindBankcard } from "@/api/rechargeWithDrawal";
export default {
  data() {
    return {
      binkCardInfo: {},
      showCard: "",
      // 银行卡解绑参数
      unBindParams: {
        code: "",
        cardNo: "",
        ystMobile: ""
      },
      downShow: false,
      timer: null,
      downNum: ""
    };
  },
  watch: {
    ["code"](val) {
      if (val.length > 6) {
        this.unBindParams.code = val.substring(0, 6);
      }
    }
  },
  computed: {
    code() {
      return this.unBindParams.code;
    }
  },
  created() {
    this.binkCardInfo = localStorage.getItem("binkCardInfo")
      ? JSON.parse(localStorage.getItem("binkCardInfo"))
      : {};
    console.log("银行卡信息", this.binkCardInfo);

    if (this.binkCardInfo.cardType) {
      let reg = /^(\d{4})\d+(\d{4})$/;
      this.showCard = this.binkCardInfo.cardType.replace(reg, "$1**********$2");
      this.unBindParams.cardNo = this.binkCardInfo.cardType;
      this.unBindParams.ystMobile = this.binkCardInfo.ystMobile;
    }
  },
  methods: {
    // 获取解绑银行卡验证码
    getUnbindcardCode() {
      console.log("获取解绑银行卡验证码参数", this.unBindParams);
      applyUnbindBankcard(this.unBindParams).then(res => {
        // console.log("获取解绑银行卡验证码", res);
        if (res.code == 1) {
          this.countDown();
          Notify({ type: "success", message: "发送成功，请注意查收短信" });
        } else {
          Notify({ type: "warning", message: res.msg || "发送失败" });
        }
      });
    },
    // 确认解绑
    _unbindBankcard() {
      if (this.unBindParams.code == "") {
        Notify({ type: "warning", message: "请输入验证码" });
      } else {
        console.log("解绑银行卡参数", this.unBindParams);
        unBindBankcard(this.unBindParams).then(res => {
          // console.log("确认解绑银行卡", res);
          if (res.code == 1) {
            Notify({ type: "success", message: "银行卡解绑成功" });
            setTimeout(() => {
              this.$router.back(-1);
            }, 1000);
          } else {
            Notify({ type: "warning", message: res.msg || "解绑失败" });
          }
        });
      }
    },
    // 验证码倒计时
    countDown() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.downNum = TIME_COUNT;
        this.downShow = true;
        this.timer = setInterval(() => {
          if (this.downNum > 0 && this.downNum <= TIME_COUNT) {
            this.downNum--;
          } else {
            this.downShow = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  background-color: #f7f7f7;
  padding-top: 20px;
  > .card-info {
    background-color: #fff;
    margin-bottom: 90px;
    > .item {
      padding: 27px 30px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f2f2f2;
      font-size: 30px;
      font-weight: 400;
      color: rgba(17, 17, 17, 1);
      position: relative;
      img {
        width: 60px;
        height: 60px;
      }
      .binkName {
        margin-left: 13px;
      }
      > input {
        width: 340px;
        padding: 0 20px;
        &::placeholder {
          color: #cccccc;
        }
      }
      > .name {
        width: 120px;
      }
      > .send_code {
        margin: auto;
        margin-right: 0;
        color: #387eff;
        position: absolute;
        right: 32px;
        .downNum-btn {
          color: #c0c4cc;
        }
      }
      &:nth-of-type(2) {
        padding: 36px 30px;
      }
    }
  }
  > .btn {
    margin: 0 auto;
    width: 650px;
    height: 90px;
    line-height: 90px;
    background: linear-gradient(
      90deg,
      rgba(255, 212, 154, 1),
      rgba(255, 191, 163, 1)
    );
    border-radius: 4px;
    font-size: 30px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    &.active {
      background: linear-gradient(
        90deg,
        rgba(255, 147, 3, 1),
        rgba(254, 96, 24, 1)
      );
    }
  }
}
</style>
